<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import TheHeader from '@/components/layout/TheHeader.vue'
import TheFooter from '@/components/layout/TheFooter.vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const currentUser = computed(() => authStore.user)
const activeMenu = computed(() => route.name)

const logout = () => {
  authStore.logout()
  router.push('/')
}
</script>

<template>
  <div class="admin-layout">
    <TheHeader />
    
    <div class="admin-container container">
      <aside class="admin-sidebar">
        <div class="sidebar-header">
          <h2 class="admin-title">管理控制台</h2>
          <div class="admin-info">
            <span class="admin-name">{{ currentUser?.nickname || currentUser?.username }}</span>
            <span class="admin-role">管理员</span>
          </div>
        </div>
        
        <nav class="admin-nav">
          <router-link 
            to="/admin/dashboard" 
            class="nav-item" 
            :class="{ active: activeMenu === 'admin-dashboard' }"
          >
            控制面板
          </router-link>
          
          <router-link 
            to="/admin/users" 
            class="nav-item" 
            :class="{ active: activeMenu === 'admin-users' }"
          >
            用户管理
          </router-link>
          
          <router-link 
            to="/admin/blogs" 
            class="nav-item" 
            :class="{ active: activeMenu === 'admin-blogs' }"
          >
            博客管理
          </router-link>
          
          <router-link 
            to="/admin/blog-types" 
            class="nav-item" 
            :class="{ active: activeMenu === 'admin-blog-types' }"
          >
            分类管理
          </router-link>
          
          <router-link 
            to="/admin/comments" 
            class="nav-item" 
            :class="{ active: activeMenu === 'admin-comments' }"
          >
            评论管理
          </router-link>
          
          <router-link 
            to="/admin/logs" 
            class="nav-item" 
            :class="{ active: activeMenu === 'admin-logs' }"
          >
            系统日志
          </router-link>
          
          <div class="nav-divider"></div>
          
          <router-link to="/" class="nav-item">
            返回前台
          </router-link>
          
          <button @click="logout" class="nav-item logout-btn">
            退出登录
          </button>
        </nav>
      </aside>
      
      <main class="admin-content">
        <div class="content-header">
          <h1 class="page-title">{{ getPageTitle() }}</h1>
        </div>
        
        <div class="content-body">
          <router-view />
        </div>
      </main>
    </div>
    
    <TheFooter />
  </div>
</template>

<script>
export default {
  methods: {
    getPageTitle() {
      switch (this.$route.name) {
        case 'admin-dashboard':
          return '控制面板'
        case 'admin-users':
          return '用户管理'
        case 'admin-blogs':
          return '博客管理'
        case 'admin-blog-types':
          return '分类管理'
        case 'admin-comments':
          return '评论管理'
        case 'admin-logs':
          return '系统日志'
        default:
          return '管理控制台'
      }
    }
  }
}
</script>

<style>
.admin-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background-color);
}

.admin-container {
  display: flex;
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  flex: 1;
}

.admin-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.sidebar-header {
  background-color: var(--primary-color);
  color: white;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.admin-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.admin-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-name {
  font-weight: 500;
}

.admin-role {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.admin-nav {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.nav-item {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--text-color);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.nav-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
  color: var(--primary-color);
}

.nav-item.active {
  background-color: rgba(74, 111, 165, 0.05);
  border-left-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 500;
}

.logout-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--error-color);
}

.logout-btn:hover {
  background-color: rgba(217, 83, 79, 0.05);
}

.nav-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 0.5rem 0;
}

.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-header {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--card-shadow);
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.content-body {
  background-color: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
  flex: 1;
}

@media (max-width: 992px) {
  .admin-container {
    flex-direction: column;
  }
  
  .admin-sidebar {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  
  .admin-nav {
    display: flex;
    flex-wrap: wrap;
  }
  
  .nav-item {
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  
  .nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--primary-color);
  }
  
  .nav-divider {
    display: none;
  }
  
  .logout-btn {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .content-header,
  .content-body {
    padding: 1.5rem;
  }
  
  .admin-nav {
    flex-direction: column;
  }
}
</style> 